:host {
  display: flex;
  flex-direction: row;
}

fieldset {
  border: none;
  padding: 0;
}

legend {
  font: var(--bl-font-title-3-medium);
  color: var(--bl-color-neutral-darker);
}

.options {
  display: flex;
  flex-flow: var(--bl-checkbox-direction, column) wrap;
  gap: var(--bl-size-m);
  margin-block: var(--bl-size-xs);
}

.dirty.invalid .options {
  margin-bottom: var(--bl-size-3xs);
}

.hint {
  display: none;
  font: var(--bl-font-body-text-3);
}

.hint p {
  padding: 0;
  margin: 0;
}

.invalid-text {
  display: none;
  color: var(--bl-color-danger);
}

.dirty.invalid .hint {
  display: block;
}

.dirty.invalid .invalid-text {
  display: block;
}
